<script>
    import Navbar from "$lib/components/public/Navbar.svelte";
    import {isOpen} from "$lib/stores/globalControl.svelte.js";
    import BreadCrumb from "$lib/components/public/Breadcrumb.svelte";
</script>

<div style="width:{$isOpen ? '85%' : '100%'}">
    <header>
        <Navbar />
        <BreadCrumb />
    </header>

    <main>
        <slot />
    </main>
</div>

<style>

    div {
        /*transition: width 0.23s ease-in-out;*/
        height: 100%;
        position: absolute;
        right: 0;
        z-index: 700;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }

    header{
        height : 7%;
        width : 100%;
    }
    main{
        height: 93%;
        width: 100%;
    }
</style>